<template>
    <view v-if="cur">
        <nut-cell center :title="cur.category" :sub-title="cur.direction" @click="back">
            <template #desc>
                <view style="color: blue;">{{ cur.code }}</view>
            </template>
        </nut-cell>
        <nut-audio url="alert.wav" type="none" v-if="showAlert" autoplay=""></nut-audio>
        <view class="card">
            <view  :style="cur.code != curCode?'color:red':''">{{ curCode  }}</view>
        </view>
        <view class="back">
            <nut-button plain type="info" @click="back">选择箱码</nut-button>
        </view>
    </view>
</template>
<script setup lang="js">
import { useRoute } from 'vue-router';
import router from '@/router/index';
import { ref, onMounted, onUnmounted } from 'vue';
import { showToast } from '@nutui/nutui'
const route = useRoute();
const back = () => {
    router.back();
}
const cur = ref(route.query);
const ry = window.cordova.plugins.RyBridge;
const counter = ref(0);
const showAlert = ref(false);
const curCode = ref('请扫描！');
const barcodeListener = {
    success: (result) => {
        curCode.value = result.barcodeData;
        if (result.barcodeData === cur.value.code) {
            counter.value++;
        } else {
            window.navigator.vibrate(1000);
            showAlert.value = true;
            setTimeout(() => {
                showAlert.value = false;
            }, 1000);
            showToast.warn('与当箱码不同 :' + result.barcodeData);
        }
    },
    error: () => {
        showToast.warn('扫码失败');
    }
}
onMounted(() => {
    ry.addBarcodeEventListener(barcodeListener)
});
onUnmounted(() => {
    ry.removeBarcodeEventListener(barcodeListener)
});

</script>
<style scoped>
.card {
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.back {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    margin-right: 20px;
}
</style>